<template>
  <div class="height100-list">
    <scroll class="page-infinite-wrapper" ref="list" :pullUp="pullUp" :beforeScroll="beforeScroll" @scrollToEnd="searchMore" :data="companyNewsData.result">
      <div>
        <div class="page1-top bg000-opcity">
          <location-link class="location-pos" positionWay="absolute" :cur="curIndex" :linkArr="linkArr"></location-link>
        </div>
        <div class="list-block">
          <div class="list-head">
            <span>{{nav.menus[2].children[curIndex].name}}</span>
          </div>
          <ul class="list-body">
            <li v-for="(list,index) in companyNewsData.result" :key="index" class="item" @click="goToDetail(index)">
              <p class="title">{{list.title}}</p>
              <p class="date">{{list.publish}}</p>
            </li>
          </ul>
          <div class="page-infinite-loading">
            <loading v-if="hasMore" title=""></loading>
            <p class="no-more" v-else>已经到底啦...</p>
          </div>
        </div>
      </div>
    </scroll>
  </div>
</template>

<script>
  import { mapMutations, mapGetters } from 'vuex'
  import locationLink from 'src/views/location/location'
  import request from 'src/util/request'
  import Scroll from 'src/base/scroll/scroll'
  import loading from 'src/base/loading/loading'

  export default {
    data () {
      return {
        pullUp: true,
        hasMore: true,
        beforeScroll: true
      }
    },
    computed: {
      ...mapGetters([
        'companyNewsData',
        'nav'
      ]),
      linkArr () {
        let list = this.nav.menus[2].children
        list.forEach(item => {
          item.href = `/list/${item.code}`
        })
        return list
      },
      nowType () {
        return this.$route.params.type
      },
      curIndex () {
        return this.linkArr.findIndex(item => {
          return item.code === this.nowType
        })
      }
    },
    props: {

    },
    components: {
      locationLink,
      Scroll,
      loading
    },
    watch: {
      $route () {
        this.hasMore = true
        this.clearNews()
        this._ajaxList()
      }
    },
    methods: {
      ...mapMutations({
        setArrowBtnState: 'SET_ARROW_BTN_STATE',
        clearNews: 'CLEAR_companyNewsData',
        setNews: 'SET_companyNewsData'
      }),
      _ajaxList ({
        pageNo = 1,
        pageSize = 10
      } = {}) {
        request({
          url: `/api/wap/page/category/${this.nowType}`,
          loading: false
        })({ pageNo, pageSize }).then((data) => {
          this.setNews(data)
          if (data.totalPage <= data.pageNo) {
            this.hasMore = false
          }
        })
      },
      searchMore () {
        if (!this.hasMore) {
          return
        }
        if (this.companyNewsData.totalPage > this.companyNewsData.pageNo) {
          setTimeout(() => {
            this._ajaxList({
              pageNo: this.companyNewsData.pageNo + 1
            })
          }, 500)
        } else {
          this.hasMore = false
        }
      },
      goToDetail (index) {
        this.$router.push({ name: 'details', params: { type: this.nowType, id: this.companyNewsData.result[index].id } })
      }
    },
    created () {
      this.clearNews()
      this.setArrowBtnState(false)
      this.ListenScroll = true
      this._ajaxList()
    }
  }
</script>

<style lang="scss">
  .height100-list {
  	position: relative;
  	height: 100%;
  	overflow: hidden;
  	background-color: #fff;
  	.page-infinite-wrapper {
  		position: absolute;
  		top: 0;
  		width: 100%;
  		bottom: 0;
  	}
  	.page-infinite-loading {
  		text-align: center;
  		height: 50px;
  		line-height: 50px;
  		font-size: rem(26);
  		color: #666;
  		div {
  			display: inline-block;
  			vertical-align: -5px;
  			margin-right: 5px;
  		}
  	}
  	.location-bottom {
  		position: absolute;
  		width: 100%;
  		box-sizing: border-box;
  		padding-top: rem(32);
  		font-size: rem(26);
  		height: rem(200);
  		bottom: 0;
  		left: 0;
  		background-color: #474747;
  		color: #fff;
  		text-align: center;
  		line-height: rem(42);
  	}
  	.list-block {
  		position: relative;
  		z-index: 16;
  		margin-bottom: rem(20);
  		padding: rem(20) rem(26) 0 rem(26);
  		background-color: #fff;
  		.list-head {
  			height: rem(88);
  			line-height: rem(88);
  			color: #000;
  			font-size: rem(34);
  			font-weight: bold;
  			border-bottom: 1px solid #ccc;
  			span {
  				display: inline-block;
  				border-bottom: 1px solid #e02028;
  			}
  		}
  		.list-body > .item {
  			padding: rem(24) 0 rem(24) 0;
  			border-bottom: 1px solid #f3f3f3;
  			.title {
  				font-size: rem(30);
  				line-height: rem(40);
  			}
  			.date {
  				font-size: rem(26);
  				color: #999;
  				margin-top: rem(18);
  			}
  		}
  	}
  	.page1-top {
  		position: relative;
  		height: rem(410);
  		background: url('./img/list-page1-bg1.jpg') top center no-repeat;
  		background-size: cover;
  	}
  }
</style>
